chore(clerk-js): Remove secret key column in API keys component #7107
Conversation
🦋 Changeset detectedLatest commit: 020398f The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughReplaces persistent API key secret viewing with a one-time copy modal shown on creation; removes APIKeys.getSecret, surfaces secret in create responses, adds CopyApiKeyModal and ApiKeyModal plus appearance/element-id/types updates, updates UI, tests, page objects, and many localization files to support the modal-driven flow. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI as API Keys UI
participant API as Backend API
participant Modal as Copy Modal
rect rgb(230,245,255)
Note over User,UI: One-time secret flow on creation
User->>UI: Click "Create API Key"
UI->>API: POST /api_keys (name, scopes)
API-->>UI: { id, name, secret, ... }
UI->>Modal: Open with secret
User->>Modal: Click "Copy & Close"
Modal->>UI: Copy secret, close modal
end
rect rgb(255,240,230)
Note over User,UI: Removed repeatable secret fetch
User->>UI: (Previously) Request secret view
UI->>API: GET /api_keys/{id}/secret (removed)
API-->>UI: { secret } (no longer used)
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (29)
Comment |
wobsoriano
changed the title
wobsoriano
changed the title
wobsoriano
changed the title
wobsoriano
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/testing/src/playwright/unstable/page-objects/apiKeys.ts (1)
44-46: LGTM! Button click implementation is correct.The scoped selector (
.cl-apiKeysCopyModal .cl-apiKeysCopyModalSubmitButton) ensures the button is clicked within the modal context, which is defensive and correct.Optional: Consider adding explicit return types file-wide.
The coding guidelines recommend explicit return types for public APIs. While this method (and all others in this file) currently rely on type inference, adding return types would improve TypeScript type safety:
clickCopyAndCloseButton: () => { - return page.locator('.cl-apiKeysCopyModal .cl-apiKeysCopyModalSubmitButton').click(); + return page.locator('.cl-apiKeysCopyModal .cl-apiKeysCopyModalSubmitButton').click(); },This would apply to all methods in the file, not just the new ones. Can be deferred to a separate refactoring effort.
As per coding guidelines.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
integration/tests/machine-auth/component.test.ts(5 hunks)packages/testing/src/playwright/unstable/page-objects/apiKeys.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- integration/tests/machine-auth/component.test.ts
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/testing/src/playwright/unstable/page-objects/apiKeys.ts
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/testing/src/playwright/unstable/page-objects/apiKeys.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/testing/src/playwright/unstable/page-objects/apiKeys.ts
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/testing/src/playwright/unstable/page-objects/apiKeys.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/testing/src/playwright/unstable/page-objects/apiKeys.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/testing/src/playwright/unstable/page-objects/apiKeys.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (1)
packages/testing/src/playwright/unstable/page-objects/apiKeys.ts (1)
38-43: LGTM! Modal lifecycle methods follow established patterns.The implementation correctly mirrors the existing revoke modal methods and uses appropriate Playwright selectors and wait strategies.
| apiKeys: { | ||
| action__add: undefined, | ||
| action__search: undefined, | ||
| copySecret: { |
There was a problem hiding this comment.
I'm thinking we might want to try to translate these, even with AI.
There was a problem hiding this comment.
#7160 let me know your thoughts @tmilewski then I can merge to this!
There was a problem hiding this comment.
merged the AI generated translations ✅
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (7)
packages/localizations/src/pt-BR.ts (3)
20-24: Grammar inconsistency: prefer "chave de API" for consistency.The translation structure looks good overall. However, on line 23, "chave API" should be "chave de API" (with the preposition "de") to match the established pattern elsewhere in this file (e.g., line 238: "Nome da chave de API").
Apply this diff to fix the grammar:
- formTitle: 'Copie sua chave API "{{name}}" agora', + formTitle: 'Copie sua chave de API "{{name}}" agora',
234-234: New field not yet translated.The
undefinedvalue is acceptable for this community-maintained localization file, but this field should be translated in a future update to provide complete Portuguese (Brazil) support.
235-235: New field not yet translated.The
undefinedvalue is acceptable for this community-maintained localization file, but this field should be translated in a future update to provide complete Portuguese (Brazil) support.packages/localizations/src/ru-RU.ts (1)
20-24: Consider more natural phrasing for the security hint.The translations are functional and correct. However, line 22 could be slightly more natural in Russian by replacing "мы не позволим вам" with "вы не сможете" for a softer, more user-friendly tone.
Optional refinement:
- formHint: 'По соображениям безопасности мы не позволим вам просмотреть его позже.', + formHint: 'По соображениям безопасности вы не сможете просмотреть его позже.',packages/localizations/src/tr-TR.ts (1)
20-24: LGTM! Well-structured Turkish localization for the copy modal.The
copySecretobject is properly nested underapiKeysand contains appropriate Turkish translations for the one-time API key copy modal. The interpolation syntax{{name}}is correct, and the structure is consistent with other nested objects in this file.Since this is a community-maintained localization file, consider having a native Turkish speaker verify the translation quality and tone to ensure it matches user expectations, though the strings appear reasonable.
packages/localizations/src/pt-PT.ts (1)
20-24: LGTM! Translations correctly support the copy-secret modal flow.The Portuguese translations accurately convey the one-time API key viewing behavior. The structure and interpolation syntax are correct.
Optional refinement for more natural Portuguese on line 22:
- formHint: 'Por razões de segurança, não permitiremos que visualize novamente mais tarde.', + formHint: 'Por razões de segurança, não será possível visualizá-la novamente.',This alternative phrasing ("it won't be possible to view it again") flows slightly more naturally in Portuguese, though the current version is grammatically correct.
packages/localizations/src/nl-NL.ts (1)
228-228: Consider translating the API key form field label.While setting this to
undefinedis consistent with the pattern for untranslated strings in this community-maintained localization file, you may want to provide a Dutch translation for completeness. A suggested translation would be'API-sleutel'.If desired, apply this diff:
- formFieldLabel__apiKey: undefined, + formFieldLabel__apiKey: 'API-sleutel',
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (48)
packages/localizations/src/ar-SA.ts(2 hunks)packages/localizations/src/be-BY.ts(2 hunks)packages/localizations/src/bg-BG.ts(2 hunks)packages/localizations/src/bn-IN.ts(2 hunks)packages/localizations/src/ca-ES.ts(2 hunks)packages/localizations/src/cs-CZ.ts(2 hunks)packages/localizations/src/da-DK.ts(2 hunks)packages/localizations/src/de-DE.ts(2 hunks)packages/localizations/src/el-GR.ts(2 hunks)packages/localizations/src/en-GB.ts(2 hunks)packages/localizations/src/es-CR.ts(2 hunks)packages/localizations/src/es-ES.ts(2 hunks)packages/localizations/src/es-MX.ts(2 hunks)packages/localizations/src/es-UY.ts(2 hunks)packages/localizations/src/fa-IR.ts(2 hunks)packages/localizations/src/fi-FI.ts(2 hunks)packages/localizations/src/fr-FR.ts(2 hunks)packages/localizations/src/he-IL.ts(2 hunks)packages/localizations/src/hi-IN.ts(2 hunks)packages/localizations/src/hr-HR.ts(2 hunks)packages/localizations/src/hu-HU.ts(2 hunks)packages/localizations/src/id-ID.ts(2 hunks)packages/localizations/src/is-IS.ts(2 hunks)packages/localizations/src/it-IT.ts(2 hunks)packages/localizations/src/ja-JP.ts(2 hunks)packages/localizations/src/kk-KZ.ts(2 hunks)packages/localizations/src/ko-KR.ts(2 hunks)packages/localizations/src/mn-MN.ts(2 hunks)packages/localizations/src/ms-MY.ts(2 hunks)packages/localizations/src/nb-NO.ts(2 hunks)packages/localizations/src/nl-BE.ts(2 hunks)packages/localizations/src/nl-NL.ts(2 hunks)packages/localizations/src/pl-PL.ts(2 hunks)packages/localizations/src/pt-BR.ts(2 hunks)packages/localizations/src/pt-PT.ts(2 hunks)packages/localizations/src/ro-RO.ts(2 hunks)packages/localizations/src/ru-RU.ts(2 hunks)packages/localizations/src/sk-SK.ts(2 hunks)packages/localizations/src/sr-RS.ts(2 hunks)packages/localizations/src/sv-SE.ts(2 hunks)packages/localizations/src/ta-IN.ts(2 hunks)packages/localizations/src/te-IN.ts(2 hunks)packages/localizations/src/th-TH.ts(2 hunks)packages/localizations/src/tr-TR.ts(2 hunks)packages/localizations/src/uk-UA.ts(2 hunks)packages/localizations/src/vi-VN.ts(2 hunks)packages/localizations/src/zh-CN.ts(2 hunks)packages/localizations/src/zh-TW.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (35)
- packages/localizations/src/fi-FI.ts
- packages/localizations/src/bg-BG.ts
- packages/localizations/src/zh-TW.ts
- packages/localizations/src/uk-UA.ts
- packages/localizations/src/es-ES.ts
- packages/localizations/src/sv-SE.ts
- packages/localizations/src/ca-ES.ts
- packages/localizations/src/hu-HU.ts
- packages/localizations/src/fa-IR.ts
- packages/localizations/src/ja-JP.ts
- packages/localizations/src/te-IN.ts
- packages/localizations/src/es-CR.ts
- packages/localizations/src/mn-MN.ts
- packages/localizations/src/ar-SA.ts
- packages/localizations/src/fr-FR.ts
- packages/localizations/src/it-IT.ts
- packages/localizations/src/de-DE.ts
- packages/localizations/src/sk-SK.ts
- packages/localizations/src/is-IS.ts
- packages/localizations/src/ro-RO.ts
- packages/localizations/src/zh-CN.ts
- packages/localizations/src/nl-BE.ts
- packages/localizations/src/ko-KR.ts
- packages/localizations/src/vi-VN.ts
- packages/localizations/src/el-GR.ts
- packages/localizations/src/cs-CZ.ts
- packages/localizations/src/ta-IN.ts
- packages/localizations/src/he-IL.ts
- packages/localizations/src/en-GB.ts
- packages/localizations/src/es-UY.ts
- packages/localizations/src/th-TH.ts
- packages/localizations/src/bn-IN.ts
- packages/localizations/src/hi-IN.ts
- packages/localizations/src/es-MX.ts
- packages/localizations/src/nb-NO.ts
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/localizations/src/pt-BR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/id-ID.tspackages/localizations/src/da-DK.tspackages/localizations/src/be-BY.tspackages/localizations/src/ms-MY.tspackages/localizations/src/pl-PL.tspackages/localizations/src/ru-RU.tspackages/localizations/src/sr-RS.tspackages/localizations/src/nl-NL.tspackages/localizations/src/hr-HR.tspackages/localizations/src/tr-TR.tspackages/localizations/src/pt-PT.ts
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/localizations/src/pt-BR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/id-ID.tspackages/localizations/src/da-DK.tspackages/localizations/src/be-BY.tspackages/localizations/src/ms-MY.tspackages/localizations/src/pl-PL.tspackages/localizations/src/ru-RU.tspackages/localizations/src/sr-RS.tspackages/localizations/src/nl-NL.tspackages/localizations/src/hr-HR.tspackages/localizations/src/tr-TR.tspackages/localizations/src/pt-PT.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/localizations/src/pt-BR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/id-ID.tspackages/localizations/src/da-DK.tspackages/localizations/src/be-BY.tspackages/localizations/src/ms-MY.tspackages/localizations/src/pl-PL.tspackages/localizations/src/ru-RU.tspackages/localizations/src/sr-RS.tspackages/localizations/src/nl-NL.tspackages/localizations/src/hr-HR.tspackages/localizations/src/tr-TR.tspackages/localizations/src/pt-PT.ts
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/localizations/src/pt-BR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/id-ID.tspackages/localizations/src/da-DK.tspackages/localizations/src/be-BY.tspackages/localizations/src/ms-MY.tspackages/localizations/src/pl-PL.tspackages/localizations/src/ru-RU.tspackages/localizations/src/sr-RS.tspackages/localizations/src/nl-NL.tspackages/localizations/src/hr-HR.tspackages/localizations/src/tr-TR.tspackages/localizations/src/pt-PT.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/localizations/src/pt-BR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/id-ID.tspackages/localizations/src/da-DK.tspackages/localizations/src/be-BY.tspackages/localizations/src/ms-MY.tspackages/localizations/src/pl-PL.tspackages/localizations/src/ru-RU.tspackages/localizations/src/sr-RS.tspackages/localizations/src/nl-NL.tspackages/localizations/src/hr-HR.tspackages/localizations/src/tr-TR.tspackages/localizations/src/pt-PT.ts
packages/localizations/**/*
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Localization files must be placed in 'packages/localizations/'.
Files:
packages/localizations/src/pt-BR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/id-ID.tspackages/localizations/src/da-DK.tspackages/localizations/src/be-BY.tspackages/localizations/src/ms-MY.tspackages/localizations/src/pl-PL.tspackages/localizations/src/ru-RU.tspackages/localizations/src/sr-RS.tspackages/localizations/src/nl-NL.tspackages/localizations/src/hr-HR.tspackages/localizations/src/tr-TR.tspackages/localizations/src/pt-PT.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/localizations/src/pt-BR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/id-ID.tspackages/localizations/src/da-DK.tspackages/localizations/src/be-BY.tspackages/localizations/src/ms-MY.tspackages/localizations/src/pl-PL.tspackages/localizations/src/ru-RU.tspackages/localizations/src/sr-RS.tspackages/localizations/src/nl-NL.tspackages/localizations/src/hr-HR.tspackages/localizations/src/tr-TR.tspackages/localizations/src/pt-PT.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (18)
packages/localizations/src/pl-PL.ts (2)
20-24: LGTM! Well-structured localization for the one-time API key modal.The Polish translations for the new
copySecretmodal are properly structured and align with the PR objective of displaying API key secrets one time only. The interpolation placeholder{{name}}informTitleis correctly formatted.
229-229: LGTM! Consistent with the file's incomplete translation pattern.The
formFieldLabel__apiKeyfield is set toundefined, which is consistent with many other incomplete translations in this community-contributed localization file. This is acceptable given the disclaimer at the top of the file.packages/localizations/src/be-BY.ts (2)
20-24: LGTM! API key copy modal translations added correctly.The
copySecretgroup is properly structured with complete Belarusian translations for the one-time API key display modal. The template variable{{name}}informTitleis correctly formatted.
230-230: Acceptable placeholder for community localization.The
formFieldLabel__apiKeyfield is set toundefined, which is consistent with the pattern used throughout this community-maintained localization file (as noted in the file's disclaimer). This indicates a pending translation that can be contributed by the community later.packages/localizations/src/ru-RU.ts (1)
231-231: LGTM!The
formFieldLabel__apiKeyfield is correctly set toundefined, following the established pattern for untranslated or deferred fields in this localization file.packages/localizations/src/hr-HR.ts (2)
20-24: LGTM! Croatian translations for the one-time secret modal are accurate.The new
copySecretnested object properly supports the one-time API key secret display feature. The Croatian translations are grammatically correct, use appropriate formal tone, and the{{name}}interpolation variable is correctly formatted.
228-228: Placeholder is acceptable for community localization.The
formFieldLabel__apiKeyproperty is set toundefined, which is consistent with the community-maintained nature of this localization file. The application will fall back to a default value until a Croatian translation is provided.packages/localizations/src/sr-RS.ts (2)
20-24: LGTM! Structure and translations align with the one-time secret copy flow.The
copySecretobject is structured consistently with other locales in this PR. The Serbian translations correctly convey the security message that the secret can only be viewed once, and the interpolation syntax for{{name}}is properly preserved.
228-228: Consistent with community contribution pattern.The
formFieldLabel__apiKeyis set toundefined, which aligns with this community-contributed localization file's approach where many strings remain untranslated. This is acceptable per the file's disclaimer and is consistent with the pattern across other undefined fields in the file.packages/localizations/src/tr-TR.ts (1)
228-228: Intentional undefined value - consistent with file pattern.The
formFieldLabel__apiKeyis set toundefined, which is consistent with the pattern used throughout this community-maintained localization file for strings that haven't been translated yet. The localization system will handle this gracefully by falling back to the key name or the default locale.packages/localizations/src/pt-PT.ts (1)
228-228: Consistent with the file's translation pattern.The
formFieldLabel__apiKeyfield is set toundefined, matching the established pattern in this community-contributed localization file where many fields remain untranslated. This is acceptable and won't break functionality.packages/localizations/src/ms-MY.ts (2)
228-228: LGTM! Field addition follows established pattern.The
formFieldLabel__apiKeyfield is correctly placed within the form field label section. Theundefinedvalue is consistent with other untranslated keys in this community-contributed localization file.
20-24: LGTM! All verification checks passed.The
copySecretnested object structure and{{name}}placeholder usage are verified as correct and consistent across all 50+ locale files. No structural issues or inconsistencies detected.packages/localizations/src/da-DK.ts (2)
20-24: LGTM! Structure and template variable usage are correct.The
copySecretobject is properly structured with the three required fields for the one-time secret display modal. The template variable{{name}}on line 23 is correctly formatted and positioned. The security message on line 22 appropriately reinforces that the secret cannot be viewed again later, which aligns with the PR's security objectives.As this is a community-contributed localization with a disclaimer (lines 1-11), consider having a native Danish speaker verify the grammatical accuracy of the translations, particularly:
- Line 21: "Kopiér og luk"
- Line 22: "Af sikkerhedsmæssige årsager kan vi ikke tillade dig at se det igen senere."
- Line 23: "Kopiér din API-nøgle "{{name}}" nu"
229-229: Theundefinedvalue is acceptable and follows the established pattern.The
formFieldLabel__apiKey: undefinedentry is consistent with the incomplete translation pattern used throughout this community-contributed localization file. While a Danish translation could be added in the future, the current approach maintains type safety while acknowledging the translation gap.packages/localizations/src/id-ID.ts (2)
20-24: LGTM! Indonesian translations for copy secret modal look appropriate.The translations for the one-time API key copy modal appear grammatically correct and convey the security message clearly. The use of "alasan keamanan" (security reasons) and the imperative phrasing align well with the PR's objective of preventing secret retrieval after creation.
Note: As indicated by the file's disclaimer, this is a community-contributed localization file. If possible, consider having a native Indonesian speaker review these additions for naturalness and accuracy.
228-228: Add Indonesian translation for API key label fields or mark them as intentionally untranslated.The
formFieldLabel__apiKeyfield is set toundefined, along with all related API key fields (formFieldLabel__apiKeyDescription,formFieldLabel__apiKeyExpiration,formFieldLabel__apiKeyName). The en-US reference defines these as functional UI labels:'API key','Description','Expiration', and'Secret key name'.While id-ID has many
undefinedfields, the file is actively maintained (e.g., line 232 has a translation forformFieldLabel__automaticInvitations). These four fields should either receive Indonesian translations (e.g.,'Kunci API'for the main label) or be documented as intentionally untranslated.packages/localizations/src/kk-KZ.ts (1)
20-24: LGTM! Proper translations for one-time secret modal.The Kazakh translations for the
copySecretmodal are correctly implemented with actual string values (notundefined), which aligns with the PR objective to display the API key secret only once after creation.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/localizations/src/nl-NL.ts (1)
228-228: Consider adding Dutch translation for API key label.The
formFieldLabel__apiKeyfield is currentlyundefined, consistent with the pattern for untranslated strings in this community-maintained file. While not an error, providing a Dutch translation would improve the localization completeness. A suitable translation would be:- formFieldLabel__apiKey: undefined, + formFieldLabel__apiKey: 'API-sleutel',Note: This also applies to related undefined API key labels on lines 229-231 (
formFieldLabel__apiKeyDescription,formFieldLabel__apiKeyExpiration,formFieldLabel__apiKeyName).
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/localizations/src/nl-NL.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/localizations/src/nl-NL.ts
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/localizations/src/nl-NL.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/localizations/src/nl-NL.ts
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/localizations/src/nl-NL.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/localizations/src/nl-NL.ts
packages/localizations/**/*
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Localization files must be placed in 'packages/localizations/'.
Files:
packages/localizations/src/nl-NL.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/localizations/src/nl-NL.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (1)
packages/localizations/src/nl-NL.ts (1)
20-24: LGTM! Previous formality concern has been addressed.The translations now consistently use informal Dutch pronouns ("je", "jouw") throughout, which aligns with the informal tone used in the rest of the localization file. The grammar and phrasing are correct for Dutch.
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (3)
packages/localizations/src/fi-FI.ts (1)
229-232: LGTM! Translations are accurate.The Finnish translations for the API key form labels are correct:
- 'API-avain' (API key)
- 'Kuvaus' (Description)
- 'Vanheneminen' (Expiration)
- 'Salaisen avaimen nimi' (Secret key name)
Optional: Line 232 could be simplified to "Avaimen nimi" (Key name) instead of "Salaisen avaimen nimi" (Secret key name) for brevity, but the current version is clear and explicit.
packages/localizations/src/es-CR.ts (1)
230-234: Minor Spanish phrasing tweak for naturalness (optional).Consider adding the article in the secret-name label.
- formFieldLabel__apiKeyName: 'Nombre de clave secreta', + formFieldLabel__apiKeyName: 'Nombre de la clave secreta',packages/localizations/src/ar-SA.ts (1)
229-233: Arabic term for “expiration” could be clearer (optional).“الانتهاء” is understandable but “انتهاء الصلاحية” is more standard.
- formFieldLabel__apiKeyExpiration: 'الانتهاء', + formFieldLabel__apiKeyExpiration: 'انتهاء الصلاحية',
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (49)
packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx(5 hunks)packages/localizations/src/ar-SA.ts(2 hunks)packages/localizations/src/be-BY.ts(2 hunks)packages/localizations/src/bg-BG.ts(2 hunks)packages/localizations/src/bn-IN.ts(2 hunks)packages/localizations/src/ca-ES.ts(2 hunks)packages/localizations/src/cs-CZ.ts(2 hunks)packages/localizations/src/da-DK.ts(2 hunks)packages/localizations/src/de-DE.ts(2 hunks)packages/localizations/src/el-GR.ts(2 hunks)packages/localizations/src/en-GB.ts(2 hunks)packages/localizations/src/es-CR.ts(2 hunks)packages/localizations/src/es-ES.ts(2 hunks)packages/localizations/src/es-MX.ts(2 hunks)packages/localizations/src/es-UY.ts(2 hunks)packages/localizations/src/fa-IR.ts(2 hunks)packages/localizations/src/fi-FI.ts(2 hunks)packages/localizations/src/fr-FR.ts(2 hunks)packages/localizations/src/he-IL.ts(2 hunks)packages/localizations/src/hi-IN.ts(2 hunks)packages/localizations/src/hr-HR.ts(2 hunks)packages/localizations/src/hu-HU.ts(2 hunks)packages/localizations/src/id-ID.ts(2 hunks)packages/localizations/src/is-IS.ts(2 hunks)packages/localizations/src/it-IT.ts(2 hunks)packages/localizations/src/ja-JP.ts(2 hunks)packages/localizations/src/kk-KZ.ts(2 hunks)packages/localizations/src/ko-KR.ts(2 hunks)packages/localizations/src/mn-MN.ts(2 hunks)packages/localizations/src/ms-MY.ts(2 hunks)packages/localizations/src/nb-NO.ts(2 hunks)packages/localizations/src/nl-BE.ts(2 hunks)packages/localizations/src/nl-NL.ts(2 hunks)packages/localizations/src/pl-PL.ts(2 hunks)packages/localizations/src/pt-BR.ts(2 hunks)packages/localizations/src/pt-PT.ts(2 hunks)packages/localizations/src/ro-RO.ts(2 hunks)packages/localizations/src/ru-RU.ts(2 hunks)packages/localizations/src/sk-SK.ts(2 hunks)packages/localizations/src/sr-RS.ts(2 hunks)packages/localizations/src/sv-SE.ts(2 hunks)packages/localizations/src/ta-IN.ts(2 hunks)packages/localizations/src/te-IN.ts(2 hunks)packages/localizations/src/th-TH.ts(2 hunks)packages/localizations/src/tr-TR.ts(2 hunks)packages/localizations/src/uk-UA.ts(2 hunks)packages/localizations/src/vi-VN.ts(2 hunks)packages/localizations/src/zh-CN.ts(2 hunks)packages/localizations/src/zh-TW.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (25)
- packages/localizations/src/el-GR.ts
- packages/localizations/src/pt-BR.ts
- packages/localizations/src/it-IT.ts
- packages/localizations/src/zh-CN.ts
- packages/localizations/src/fr-FR.ts
- packages/localizations/src/th-TH.ts
- packages/localizations/src/bg-BG.ts
- packages/localizations/src/ru-RU.ts
- packages/localizations/src/he-IL.ts
- packages/localizations/src/uk-UA.ts
- packages/localizations/src/pl-PL.ts
- packages/localizations/src/hi-IN.ts
- packages/localizations/src/es-UY.ts
- packages/localizations/src/ca-ES.ts
- packages/localizations/src/nl-NL.ts
- packages/localizations/src/es-ES.ts
- packages/localizations/src/vi-VN.ts
- packages/localizations/src/ta-IN.ts
- packages/localizations/src/hr-HR.ts
- packages/localizations/src/tr-TR.ts
- packages/localizations/src/de-DE.ts
- packages/localizations/src/nl-BE.ts
- packages/localizations/src/zh-TW.ts
- packages/localizations/src/id-ID.ts
- packages/localizations/src/mn-MN.ts
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/en-GB.tspackages/localizations/src/pt-PT.tspackages/localizations/src/ro-RO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/da-DK.tspackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsxpackages/localizations/src/be-BY.tspackages/localizations/src/es-CR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.tspackages/localizations/src/ms-MY.tspackages/localizations/src/hu-HU.tspackages/localizations/src/ja-JP.tspackages/localizations/src/sk-SK.tspackages/localizations/src/nb-NO.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/fi-FI.tspackages/localizations/src/bn-IN.tspackages/localizations/src/es-MX.tspackages/localizations/src/sr-RS.tspackages/localizations/src/te-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/is-IS.ts
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/en-GB.tspackages/localizations/src/pt-PT.tspackages/localizations/src/ro-RO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/da-DK.tspackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsxpackages/localizations/src/be-BY.tspackages/localizations/src/es-CR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.tspackages/localizations/src/ms-MY.tspackages/localizations/src/hu-HU.tspackages/localizations/src/ja-JP.tspackages/localizations/src/sk-SK.tspackages/localizations/src/nb-NO.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/fi-FI.tspackages/localizations/src/bn-IN.tspackages/localizations/src/es-MX.tspackages/localizations/src/sr-RS.tspackages/localizations/src/te-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/is-IS.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/en-GB.tspackages/localizations/src/pt-PT.tspackages/localizations/src/ro-RO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/da-DK.tspackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsxpackages/localizations/src/be-BY.tspackages/localizations/src/es-CR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.tspackages/localizations/src/ms-MY.tspackages/localizations/src/hu-HU.tspackages/localizations/src/ja-JP.tspackages/localizations/src/sk-SK.tspackages/localizations/src/nb-NO.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/fi-FI.tspackages/localizations/src/bn-IN.tspackages/localizations/src/es-MX.tspackages/localizations/src/sr-RS.tspackages/localizations/src/te-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/is-IS.ts
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/en-GB.tspackages/localizations/src/pt-PT.tspackages/localizations/src/ro-RO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/da-DK.tspackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsxpackages/localizations/src/be-BY.tspackages/localizations/src/es-CR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.tspackages/localizations/src/ms-MY.tspackages/localizations/src/hu-HU.tspackages/localizations/src/ja-JP.tspackages/localizations/src/sk-SK.tspackages/localizations/src/nb-NO.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/fi-FI.tspackages/localizations/src/bn-IN.tspackages/localizations/src/es-MX.tspackages/localizations/src/sr-RS.tspackages/localizations/src/te-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/is-IS.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/en-GB.tspackages/localizations/src/pt-PT.tspackages/localizations/src/ro-RO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/da-DK.tspackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsxpackages/localizations/src/be-BY.tspackages/localizations/src/es-CR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.tspackages/localizations/src/ms-MY.tspackages/localizations/src/hu-HU.tspackages/localizations/src/ja-JP.tspackages/localizations/src/sk-SK.tspackages/localizations/src/nb-NO.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/fi-FI.tspackages/localizations/src/bn-IN.tspackages/localizations/src/es-MX.tspackages/localizations/src/sr-RS.tspackages/localizations/src/te-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/is-IS.ts
packages/localizations/**/*
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Localization files must be placed in 'packages/localizations/'.
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/en-GB.tspackages/localizations/src/pt-PT.tspackages/localizations/src/ro-RO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/da-DK.tspackages/localizations/src/be-BY.tspackages/localizations/src/es-CR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.tspackages/localizations/src/ms-MY.tspackages/localizations/src/hu-HU.tspackages/localizations/src/ja-JP.tspackages/localizations/src/sk-SK.tspackages/localizations/src/nb-NO.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/fi-FI.tspackages/localizations/src/bn-IN.tspackages/localizations/src/es-MX.tspackages/localizations/src/sr-RS.tspackages/localizations/src/te-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/is-IS.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/en-GB.tspackages/localizations/src/pt-PT.tspackages/localizations/src/ro-RO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/da-DK.tspackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsxpackages/localizations/src/be-BY.tspackages/localizations/src/es-CR.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.tspackages/localizations/src/ms-MY.tspackages/localizations/src/hu-HU.tspackages/localizations/src/ja-JP.tspackages/localizations/src/sk-SK.tspackages/localizations/src/nb-NO.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/fi-FI.tspackages/localizations/src/bn-IN.tspackages/localizations/src/es-MX.tspackages/localizations/src/sr-RS.tspackages/localizations/src/te-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/is-IS.ts
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure
Files:
packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx
🧬 Code graph analysis (1)
packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx (3)
packages/clerk-js/src/ui/components/ApiKeys/CopyApiKeyModal.tsx (1)
CopyApiKeyModal(24-101)packages/shared/src/types/clerk.ts (1)
CreateAPIKeyParams(1973-1979)packages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx (1)
OnCreateParams(23-27)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (33)
packages/localizations/src/fa-IR.ts (2)
20-24: LGTM! Structure aligns with PR objectives.The new
copySecretnested object is correctly structured and follows the established patterns in this localization file. The placeholder{{name}}syntax is correct, and the field naming convention is consistent with other form fields throughout the file. This addition properly supports the one-time modal display for API key secrets as outlined in the PR objectives.Note: As this is a community-maintained localization file (per the disclaimer), the Persian/Farsi translation accuracy should ideally be verified by a native speaker, though the technical implementation is sound.
234-234: LGTM! Consistent field naming and placement.The new
formFieldLabel__apiKeyfield follows the established naming convention and is appropriately placed alongside other form field labels. The positioning near related API key fields (lines 235-237) maintains logical organization within the localization file.packages/localizations/src/is-IS.ts (2)
20-24: LGTM! Copy secret modal localization added correctly.The new
copySecretnested group properly supports the one-time secret display modal feature described in the PR. The structure and interpolation syntax are correct.
229-232: LGTM! API key field labels properly localized.The new and updated field labels complete the Icelandic localization for API key management forms, transitioning from
undefinedto proper translations.packages/localizations/src/sv-SE.ts (2)
20-24: LGTM! Well-structured one-time secret modal translations.The
copySecretsection is properly structured with clear, natural Swedish translations that effectively communicate the one-time nature of the secret display. The template variable syntax{{name}}is correctly formatted, and the security message appropriately warns users about the inability to retrieve the secret later.
229-232: LGTM! Accurate and consistent form field labels.The new API key form field labels follow the established naming convention and provide clear, concise Swedish translations. All four labels are appropriately translated and align well with the updated API keys UI flow.
packages/localizations/src/sk-SK.ts (2)
20-24: LGTM! Well-structured localization for the one-time secret modal.The
copySecretobject properly supports the new modal workflow with appropriate Slovak translations. The interpolation pattern{{name}}in line 23 is consistent with the file's conventions, and the security hint appropriately conveys the one-time viewing nature of the secret.
229-232: LGTM! API key form labels properly localized.The form field labels are correctly translated and provide appropriate Slovak terminology for the API key management interface. The translations are clear and consistent with standard Slovak technical vocabulary.
packages/localizations/src/ms-MY.ts (2)
20-24: LGTM! New copySecret group properly structured.The new
copySecretlocalization group is correctly nested underapiKeysand includes all required keys for the one-time secret display modal. The template variable{{name}}is properly preserved in the title string.
228-231: LGTM! Form field labels properly populated.The API key form field labels have been correctly populated with Malay translations, replacing the previous
undefinedvalues. These labels support the updated API keys UI functionality described in the PR objectives.packages/localizations/src/ko-KR.ts (2)
20-24: LGTM! New copy secret modal localization added correctly.The new
copySecretobject is properly structured and aligns with the PR objective of displaying API secrets one-time only. The placeholder syntax{{name}}follows standard localization patterns.
229-232: LGTM! Form field labels properly localized.The API key form field labels are correctly structured and follow the established naming conventions. The Korean translations align with the API key management features.
packages/localizations/src/nb-NO.ts (2)
20-24: LGTM! Localization for one-time secret copy modal.The new
copySecretlocalization object correctly supports the PR's security objective of displaying API key secrets only once via a modal. The structure includes all required fields (button text, security hint, and title with name interpolation), and the translations appropriately convey the one-time nature of secret access.
229-232: LGTM! Complete form field labels for API key UI.All necessary form field labels for the API key feature are properly defined with appropriate Norwegian translations. These support the new API key management UI introduced in this PR.
packages/localizations/src/kk-KZ.ts (2)
20-24: LGTM! Clean addition of API key copy modal localization.The new
copySecretobject properly localizes the one-time API key copy modal with Kazakh translations. The interpolation syntax{{name}}in the title is correct, and the security hint appropriately warns users about the one-time viewing limitation.
228-231: LGTM! Properly addresses previous review feedback.These translations replace previously undefined values with actual Kazakh strings for API key form labels, directly resolving the concern raised in past reviews about undefined values. The translations appropriately support the new API key management features.
Based on learnings
packages/localizations/src/hu-HU.ts (2)
228-228: LGTM!The translation for "API key" is accurate and consistent with standard Hungarian technical terminology.
229-230: LGTM!The translations for "Description" and "Expiration" are accurate and use standard Hungarian terms.
packages/localizations/src/da-DK.ts (2)
229-232: LGTM! Field labels are correctly defined.The four new API key field labels follow the established naming convention and replace previously undefined placeholders. The translations appear properly formatted.
20-24: Localization keys verified across all locale files.The verification confirms that
copySecretand all four newformFieldLabel__apiKey*keys are consistently present across all 50 locale files. The changes are structurally sound, follow established naming conventions, and are uniformly applied.packages/localizations/src/sr-RS.ts (2)
20-24: LGTM! Copy secret modal translations look correct.The
copySecretobject is properly structured with appropriate Serbian translations for the one-time API key copy modal. The template variable{{name}}on line 23 is correctly formatted and will be interpolated at runtime.
228-231: Translations look technically correct.The API key form field labels are properly structured and follow the expected naming conventions. All translations use consistent Cyrillic script.
For line 231 (
formFieldLabel__apiKeyName): The translation 'Назив тајног кључа' means "Secret key name" or "Name of secret key." While technically correct, you may want to verify with a native Serbian speaker whether this phrasing is the most natural choice for a general API key label/name field, or if a simpler term like "Назив API кључа" (API key name) would be more appropriate.packages/localizations/src/es-MX.ts (1)
231-234: No changes needed—Spanish translations are correct.The verification confirms this is not an issue. The en-US source (line 226) explicitly uses
'Secret key name'forformFieldLabel__apiKeyName, not'API key name'. The Spanish translations accurately reflect this intentional distinction:
'Clave API'(API key) for the general field'Nombre de clave secreta'(Secret key name) for the specific naming fieldAll Spanish locales (es-MX, es-UY, es-CR, es-ES) are consistently translated. The code is correct as written.
packages/localizations/src/te-IN.ts (2)
20-24: LGTM! One-time secret modal localization is well-structured.The Telugu translations for the copy secret modal are contextually appropriate and clearly communicate the security constraint that the secret can only be viewed once.
228-228: LGTM!The translation for the API key label is correct and straightforward.
packages/localizations/src/cs-CZ.ts (2)
233-233: Added API key label reads well.No issues.
20-24: Copy-secret modal strings verified across all locales.All 48 locale files define the complete copySecret structure with formButtonPrimary__copyAndClose, formHint, and formTitle keys. The {{name}} placeholder is consistently present in formTitle entries (verified in cs-CZ.ts line 23 and sampled across multiple locales). Parity is maintained and placeholder shape is correct.
packages/localizations/src/ro-RO.ts (2)
20-24: Copy-secret modal strings are solid.Correct placeholder and tone.
235-235: API key label added correctly.Matches naming across locales.
packages/localizations/src/es-CR.ts (1)
20-24: Copy-secret modal: good addition.Strings and {{name}} placeholder look correct for the one-time display.
packages/localizations/src/ar-SA.ts (1)
20-24: Copy-secret modal strings LGTM.RTL text and "{{name}}" placement are fine.
packages/localizations/src/be-BY.ts (2)
21-24: Copy-secret modal entries look correct.Good placeholder and idiomatic phrasing.
230-234: API key labels added consistently.Terminology aligns with adjacent keys.
| const handleCreateApiKey = async (params: OnCreateParams) => { | ||
| try { | ||
| await createApiKey({ | ||
| ...params, | ||
| subject, | ||
| }); | ||
| closeCardFn(); | ||
| void mutateApiKeys(cacheKey); | ||
| card.setError(undefined); | ||
| setIsCopyModalOpen(true); | ||
| } catch (err: any) { |
There was a problem hiding this comment.
Don't open the copy modal before the new secret exists
After createApiKey resolves we always flip isCopyModalOpen to true, but on the first render createdApiKey is still undefined. The modal then paints with an empty name and secret, so users may briefly see blank copy instructions and end up copying an empty string on slower responses. Capture the mutation result, store it in local state, and gate the modal on created?.secret before opening. Then feed the modal from that state so it never renders without the freshly returned secret.
- await createApiKey({
+ const created = await createApiKey({
...params,
subject,
});
- void mutateApiKeys(cacheKey);
- card.setError(undefined);
- setIsCopyModalOpen(true);
+ void mutateApiKeys(cacheKey);
+ card.setError(undefined);
+ if (created?.secret) {
+ setLatestCreatedApiKey(created);
+ setIsCopyModalOpen(true);
+ }Add a latestCreatedApiKey state (initially null) and bind the modal props to that instead of createdApiKey so the UI only opens when the secret is ready.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx around lines 90 to 99:
after creating the API key, we currently open the copy modal before the newly
created key (including its secret) is available, causing the modal to render
empty; fix by adding a local state latestCreatedApiKey (initially null), await
the mutation/create result and set latestCreatedApiKey to the returned object,
only setIsCopyModalOpen(true) when latestCreatedApiKey?.secret exists, and pass
latestCreatedApiKey into the modal props instead of the possibly-undefined
createdApiKey so the modal never renders without the fresh secret.
| formFieldLabel__apiKeyDescription: 'వివరణ', | ||
| formFieldLabel__apiKeyExpiration: 'కాలం ముగిసింది', | ||
| formFieldLabel__apiKeyName: 'రహస్య కీ పేరు', |
There was a problem hiding this comment.
🧩 Analysis chain
Verify Telugu translations for expiration and name fields.
Please review these translations for accuracy:
-
Line 230 (
formFieldLabel__apiKeyExpiration): 'కాలం ముగిసింది' translates to "expired" (past tense), but this field is used for setting or displaying the expiration date (future/neutral tense). Consider using 'గడువు' (expiration) or 'గడువు తేదీ' (expiration date) instead. -
Line 231 (
formFieldLabel__apiKeyName): 'రహస్య కీ పేరు' translates to "Secret key name", but this field represents the display name of the API key itself, not the secret value. Consider using 'API కీ పేరు' (API Key Name) or simply 'పేరు' (Name) for clarity, as the "secret" refers to the key's value, not its name.
🌐 Web query:
Telugu translation expiration date కాలం ముగిసింది
💡 Result:
Here are concise Telugu ↔ English translations:
- "expiration date" — గడువు తేదీ (gaduvu tedi) / ముగింపు తేది (mugimpu tedi). [1][3]
- "కాలం ముగిసింది" — "The time/period has expired" or simply "Expired." [1][2]
Examples:
- "Expiration date: June 30, 2025." — "గడువు తేదీ: 30 జూన్, 2025." [1][3]
🌐 Web query:
Telugu word for API key name పేరు
💡 Result:
Options you can use:
- API కీ పేరు
- API కీ యొక్క పేరు (more formal)
- API కీల పేరు (uses 'కీల' as Telugu-form of 'key')
Usage example: "API కీ పేరు నమోదు చేయండి" — "Enter the API key name." [1]
Sources: WebTranslateIt API docs (shows common use of "key name" / "key"). [1]
Fix Telugu translations for expiration and name fields (lines 230–231).
-
Line 230 (
formFieldLabel__apiKeyExpiration): Replace 'కాలం ముగిసింది' (which means "Expired" in past tense) with 'గడువు తేదీ' or 'ముగింపు తేది' for "expiration date". -
Line 231 (
formFieldLabel__apiKeyName): Replace 'రహస్య కీ పేరు' with 'API కీ పేరు' to correctly represent the API key name rather than "secret key name".
🤖 Prompt for AI Agents
In packages/localizations/src/te-IN.ts around lines 229 to 231, update the
Telugu translations: change formFieldLabel__apiKeyExpiration from 'కాలం
ముగిసింది' to a phrase for "expiration date" such as 'గడువు తేదీ' or 'ముగింపు
తేది', and change formFieldLabel__apiKeyName from 'రహస్య కీ పేరు' to 'API కీ
పేరు' so it correctly reads "API key name".
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Description
This PR replaces the persistent key column in the API keys table with a one-time modal that displays the secret immediately after creation.
Screen.Recording.2025-11-03.at.9.24.27.AM.mov
Resolves USER-3698
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Improvements
Tests
Localization